import React from 'react';
import { observer } from 'mobx-react';
import { WeaTop,WeaLocaleProvider,WeaTab,WeaSearchGroup,WeaInput,WeaFormItem,WeaTable,WeaRightMenu } from 'ecCom';
import {Button} from 'antd';
import TemplateManageStore from '../../stores/list/TemplateManageStore';
import { EidtTemplateDialog } from './EidtTemplate';
import { SetTemplateColumnDialog } from './SetTemplateColumn';
import {SetCustomConditionDialog} from './SetCustomCondition';
const getLabel = WeaLocaleProvider.getLabel;
import $ from 'jquery'

export interface TemplateListProps {
    templateManageStore:TemplateManageStore
}
@observer
export default class TemplateList extends React.Component<TemplateListProps, any> {
    constructor(props) {
        super(props);
        this.state = {
            showSearchAd: false
        }
    }
    recalculateMask = () => {
        let domRootStr = $(".coms-mode-templateManage")
        if(domRootStr.length>0){
            let dom = domRootStr.find('.wea-search-container')[0];
            if(dom){
                let maskDarkHeight = window.innerHeight - dom.offsetTop - 110;
                domRootStr.find(`.mask-dark`).height(maskDarkHeight);
            }
        }
    }

    render() {
        const {templateManageStore}=this.props;
        const {iconInfo } = templateManageStore;
        return (<div style={{height:'100%'}}>
            <WeaRightMenu
                datas={[{
                    key: 'add',
                    icon: <i className='icon-coms-New-Flow' />,
                    content: getLabel(82, '新建', 'label'),
                },{
                    key: 'search',
                    icon: <i className='icon-coms-search' />,
                    content: getLabel(197, '搜索', 'label'),
                }]}
                onClick={templateManageStore.rightClick}
                collectParams={{
                    "favname": getLabel(17857, "模板管理"),
                    "link": '/' + window.location.toString().split('/').slice(3).join('/'),
                    "favouritetype": 5,
                    "importantlevel": 1
                }}
            >
                <WeaTop
                    title={getLabel(17857, "模板管理")}
                    icon={<i className={iconInfo.icon} style={{color:iconInfo.iconColor}} />}
                    iconBgcolor={iconInfo.iconBg}
                    buttons={[
                        <Button type='primary' onClick={()=>{templateManageStore.add()}}>{getLabel(82, "新建")}</Button>
                    ]}
                />
                <WeaTab
                    searchType={['base','advanced']}
                    onSearch={v => {
                        templateManageStore.searchByName(v);
                    }}
                    searchsBaseValue={templateManageStore.templateName1}
                    showSearchAd={this.state.showSearchAd}
                    setShowSearchAd={bool=>{
                        this.setState({
                            showSearchAd: bool
                        })
                    }}
                    advanceHeight={'auto'}
                    searchsAd={<WeaSearchGroup title={getLabel(20331, "查询条件")} items={[
                        {com:<WeaFormItem
                            label={getLabel(18151, "模板名称")}
                            ratio1to2
                        >
                            <WeaInput onChange={v=>templateManageStore.templateName=v} value={templateManageStore.templateName} />
                        </WeaFormItem>,
                        colSpan: 1}
                    ]} center showGroup={true} onVisibleChange={this.recalculateMask}/>}
                    buttonsAd={[
                        <Button type="primary" onClick={()=>{templateManageStore.searchByName(templateManageStore.templateName);this.setState({showSearchAd: false});}}>{getLabel(387355, "搜索")}</Button>,
                        <Button type="ghost" onClick={()=>{templateManageStore.templateName=''}}>{getLabel(2022, "重置")}</Button>,
                        <Button type="ghost" onClick={()=>{
                            this.setState({showSearchAd: false})
                        }}>{getLabel(201, "取消")}</Button>
                    ]}/>
                    <WeaTable loading={templateManageStore.loading} columns={templateManageStore.columns}
                    dataSource={templateManageStore.templateListDatas}
                    pagination={templateManageStore.pagination}
                    onChange={pagination=>{templateManageStore.handleTableChange(pagination);}}/>
            </WeaRightMenu>
            <EidtTemplateDialog templateManageStore={templateManageStore}/>
            <SetTemplateColumnDialog templateManageStore={templateManageStore}/>
            <SetCustomConditionDialog templateManageStore={templateManageStore}/>
        </div>
        )
    }
}

